<template>
  <div style="width: 100%;height:100%;">
    <!-- 订单列表 -->
    <div class="orderlist w">
        <div class="orderlist-title1">
          <Button v-for="(item, index) in type" :key="index" style="background:#19BE6B;" :class="{ bluelight1:changed == index}" @click="selected(index)">{{ item.name }}</Button>
        </div>
        <!-- 主体内容 -->
        <div style="padding: 20px" class="orderlist-content" v-for=" (item,index) in orderInfo" :key="index">
          <Card :bordered="false">
              <p slot="title" class="cardtitle">
                <span v-show="item.dada_status=='2'">已接单列表</span>
              </p>
              <div class="cardcontent">
                <!-- 订单信息 -->
                <div class="rider" style="border:1px solid #e6e6e6;padding:5px 8px;border-radius:5px;">
                  <div class="riderinfo"><img src="../../images/shop.png" alt=""> <i style="font-weight:600;font-style:normal;color:#c00;">{{item.order_detail.length}}</i> 件商品
                  </div>
                    <div slot="content" class="shopInfo" style="margin-top:5px;overflow:hidden;display:block;" v-for="(shop,index) in item.order_detail" :key="index">
                      <div style="overflow:hideen;">
                        <p style="float:left;margin-right:15px;min-width:200px;">订单号:<span>{{item.order_sn}}</span></p>
                        <p style="float:left;">下单时间:<span>{{item.cut_price}}</span></p>
                      </div>
                      <div class="shop_img">
                        <img v-for="(item, index) in img" :key="index" :src="item" alt="img">
                      </div>
                    </div>
                </div>
                <!-- 付款信息 -->
                <div class="rider border-bottom" style="border:1px solid #e6e6e6;padding:5px 8px;border-radius:5px;margin-top:8px;">
                  <div class="riderinfo" style="font-weight:900;"><Icon style="font-size:22px;margin-left:8px;" type="information"></Icon> 收货人信息
                    <div style="font-weight:100;padding-left:20px;margin-top:8px;">
                      <p>收货人地址：<span>上海浦东</span></p>
                      <p>收货人姓名：<span>罗伊人</span></p>
                      <p>收货人手机号：<span>13415641467</span></p>
                    </div>
                  </div>
                </div>
                <!-- 订单信息 -->
                <div class="rider" style="border:1px solid #e6e6e6;padding:5px 8px 0;border-radius:5px;margin-top:8px;">
                  <div class="riderinfo" style="font-weight:900;line-height:40px;"><img src="../../images/money.png" style="position:relative;top:0px;" alt=""> 付款金额：<i style="font-style:normal;font-weight:100;">￥50元</i>
                  </div>
                </div>
              </div>
          </Card>
        </div>
        <div style="margin-right:12px;">
          <Page :total="total" show-total show-elevator :page-size="pageSize" @on-change="changePage" class="page"></Page>
        </div>
    </div>
  </div>
</template>
<script>
import { good_list, addDadaOrder } from "../../api/order/order.js";
import Base from "../../common/Base";
export default {
  mixins: [Base],
  data() {
    return {
      value1: "1",
      type: [{ name: "已接单列表", num: 0 }],
      changed: 0,
      img: [
        "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=4058493991,4135087309&fm=27&gp=0.jpg",
        "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2018132473,3477567654&fm=27&gp=0.jpg",
        "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2073311625,3227593269&fm=200&gp=0.jpg",
        "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1255814123,3163020812&fm=200&gp=0.jpg",
        "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=4058493991,4135087309&fm=27&gp=0.jpg",
        "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3955564679,1038539542&fm=27&gp=0.jpg"
      ],
      date: ["2016-01-01", "2016-02-15"],
      formData: {
        select: "订单编号",
        content: ""
      },
      dada_status: "0",
      orderInfo: [],
      total: 0,
      currentPage: 0,
      pageSize: 0
    };
  },
  methods: {
    selected(index) {
      this.$data.changed = index;
      this.getData(this.changed);
    },
    //改变页码
    changePage(page) {
      this.currentPage = page;
      this.getData(this.dada_status);
    },
    // 切换搜索项
    changeselect(value) {},
    //获取数据
    getData(dada_status) {
      good_list({
        params: {
          token: localStorage.getItem("data"),
          dada_status: dada_status,
          page: this.currentPage
        }
      }).then(res => {
        // this.orderInfo = res.data.data;
        // this.total = res.data.total;
        // this.pageSize = res.data.per_page;
        // var arr = res.data.data;
        // for (let i = 0; i < arr.length; i++) {
        //   arr[i].pre_arrive = this.changeTime(arr[i].pre_arrive).substring(9);
        //   arr[i].dada_status = Number(arr[i].dada_status);
        //   arr[i].created_at = this.changeTime(arr[i].created_at);
        //   arr[i].updated_at = this.changeTime(arr[i].updated_at);
        // }
      });
    }
  },
  mounted() {
    this.changed = this.dada_status;
    this.orderInfo = [
      {
        pre_arrive: 1,
        order_address: {
          name: "111",
          mobile: "111",
          address: "我的"
        },
        dada_status: 2,
        order_msg: [],
        order_detail: [
          {
            order_sn: "222",
            cut_price: "333"
          }
        ]
      },
      {
        pre_arrive: 1,
        order_address: {
          name: "111",
          mobile: "111",
          address: "我的"
        },
        dada_status: 2,
        order_msg: [],
        order_detail: [
          {
            order_sn: "222",
            cut_price: "333"
          }
        ]
      }
    ];
  }
};
</script>
<style lang="scss" scoped>
@import "../../css/common.scss";
.orderlist {
  margin-top: 30px;
  > .orderlist-title1 {
    text-align: left;
    margin-left: 20px;
    > Button {
      margin-right: 15px;
    }
  }
  > .orderlist-title2 {
    margin-top: 20px;
    @include flex;
    @include flexLeftRight;
  }
  > .orderlist-content {
    margin-top: 10px;
    .cardtitle {
      @include flex;
      @include flexLeftRight;
    }
    .cardcontent {
      font-size: 16px;
      .border-bottom {
        border-bottom: 2px solid #e6e6e6;
      }
      // 顾客信息
      > .customer {
        text-align: left;
        > div {
          padding-bottom: 10px;
        }
      }
      // 骑手进程信息
      > .rider {
        padding-top: 5px;
        text-align: left;
        .riderinfo {
          padding-bottom: 10px;
          > img {
            vertical-align: middle;
          }
          > span {
            float: right;
            margin-top: 10px;
          }
        }
        // 商品信息
        .shopInfo {
          width: 100%;
          .shop_img {
            padding-top: 12px;
            width: 110%;
            display: flex;
            justify-content: flex-start;
            align-content: center;
            height: auto;
            flex-wrap: wrap;
            img {
              width: 16.5%;
              height: 10%;
              margin: 0 2% 2% 0;
            }
          }
          > p {
            @include flex;
            @include flexLeftRight;
            margin-bottom: 8px;
          }
        }
        .orderinfo {
          padding-top: 20px;
          > p {
            margin-bottom: 8px;
          }
        }
      }
    }
  }
  // 分页
  .page {
    float: right;
    margin-top: 15px;
  }
}
</style>